import 'package:flutter/material.dart';

enum  MapMode {
  add,    // 添加模式
  editMarker,   // 编辑标注模式
  view,   // 查看模式
  editMap,   // 编辑地图
}
typedef OnBottomBtnClickCallback = void Function(MapMode mode);

class MapBottomBtns extends StatelessWidget {
  MapMode currentMode;
  final OnBottomBtnClickCallback onBottomBtnClick;
  MapBottomBtns({required this.currentMode,required this.onBottomBtnClick, super.key});

  @override
  Widget build(BuildContext context) {
    return  Container(
      height: 146,
      padding: const EdgeInsets.fromLTRB(24, 0, 57, 0),
      decoration: const BoxDecoration(
        color:  Color(0xFF110822)
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: 36,
            width: 36,
            margin: const EdgeInsets.only(right:25 ),
            decoration: BoxDecoration(
              color:  Color(currentMode==MapMode.add ? 0XFF2e253c : 0xFF41394e),
              shape: BoxShape.circle, // 设置形状为圆形
            ),
            child: Opacity(
              opacity: 1,
              child:Image.asset('images/menu-icon.png',width: 22,height: 22),
            )
          ),
          Expanded(
            child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    margin: const EdgeInsets.only(bottom: 10),
                    alignment: Alignment.center,
                    height: 54,
                    width: 54,
                    decoration: BoxDecoration(
                      //查看模式正式，其它模式灰色
                      color:  Color(currentMode ==MapMode.view ? 0xFF41394e : 0xFF2e253c),
                      shape: BoxShape.circle, // 设置形状为圆形
                    ),
                    child:Opacity(
                      opacity:currentMode ==MapMode.view ? 1 : 0.2,
                      child:Image.asset('images/pre-icon.png',width: 24.0,height: 24.0,fit: BoxFit.cover,),
                    )
                  ),
                  Text('上一级地图',style: TextStyle(
                    fontSize: 12,
                    color: Color(currentMode== MapMode.view ? 0xFFCCCCCC : 0XFF7a7782)
                  ),)
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  InkWell(
                    onTap: (){
                      onBottomBtnClick(currentMode!=MapMode.add ? MapMode.add : MapMode.view);
                    },
                    child: Container(
                      margin: const EdgeInsets.only(bottom: 10),
                      alignment: Alignment.center,
                      height: 54,
                      width: 54,
                      decoration: BoxDecoration(
                        //编辑标注模式灰色，其它模式正常
                        color:  Color(currentMode==MapMode.editMarker ? 0xFF2e253c : 0xFF41394e),
                        shape: BoxShape.circle, // 设置形状为圆形
                        image:currentMode==MapMode.add ? const DecorationImage(
                          image: AssetImage('images/add-marker-bg.png'),
                          fit: BoxFit.cover
                        ) : null
                      ),
                      child:Opacity(
                        opacity:currentMode ==MapMode.view || currentMode==MapMode.add ? 1 : 0.2,
                        child:Image.asset(currentMode==MapMode.add ? 'images/add-market-active.png' : 'images/add-marker-icon.png',width: 24,height: 24),
                      )
                    ),
                  ),

                  Text('添加地图点',style: TextStyle(
                    fontSize: 12,
                    color: Color(currentMode== MapMode.view ? 0xFFCCCCCC : currentMode == MapMode.add  ? 0xFFba5ef4 : 0XFF7a7782)
                  ),)
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    margin: const EdgeInsets.only(bottom: 10),
                    alignment: Alignment.center,
                    height: 54,
                    width: 54,
                    decoration: BoxDecoration(
                      color: Color(currentMode ==MapMode.view ? 0xFF41394e : 0xFF2e253c),
                      shape: BoxShape.circle, // 设置形状为圆形
                    ),
                    child:Opacity(
                      opacity:currentMode ==MapMode.view ? 1 : 0.2,
                      child:Image.asset('images/edit-icon.png',width: 24.0,height: 24.0,fit: BoxFit.cover,),
                    )
                  ),
                  Text('编辑此地点',style: TextStyle(
                    fontSize: 12,
                    color: Color(currentMode== MapMode.view ? 0xFFCCCCCC : 0XFF7a7782)
                  ),)
                ],
              )
            ],
          )
        )
        ],
      ),
    );
  }
}